{% from "shuup/admin/macros/general.jinja" import content_block %}
{% from "shuup/admin/macros/multilanguage.jinja" import language_dependent_content_tabs %}
{% set media_form = form[form_def.name] %}

{% macro render_media_form(f, media_form, idx, is_image_form) %}
    {%- set is_primary = f.is_primary.value() if is_image_form else None %}
    <div
        class="panel{% if is_primary %} panel-selected{% else %} panel-default{% endif %} pt-4"
        data-prefix="{{ f.prefix }}"
        data-idx="{{ idx }}"
        {% if f.instance and f.instance.pk %}
        data-file="{{ f.instance.pk }}"
        {% else %}
        data-file="__file_id__"
        {% endif %}
    >
        {% for h in f.hidden_fields() %}
            {# make sure to not duplicate hidden fields #}
            {% if h.name not in ("kind", "file") %}
                {{ h|safe }}
            {% endif %}
        {% endfor %}
        <div class="panel-heading d-flex align-items-center pb-1">
          <h4 class="panel-title mr-auto">
              {%- if is_image_form -%}
                {{- _("Product image %(index)s", index=idx) -}}
              {%- else -%}
                {{- _("Product media %(index)s", index=idx) -}}
              {%- endif -%}
            </h4>
            {% if is_image_form %}
                <div class="primary-action">
                    {% if f.is_primary.value() %}
                        <span class="is-primary-image">{% trans %}Primary image{% endtrans %}</span>
                    {% else %}
                        <a href="#" class="btn btn-sm btn-inverse set-as-primary">{% trans %}Set as primary image{% endtrans %}</a>
                    {% endif %}
                    <div class="d-none">{{ f.is_primary }}</div>
                </div>
            {% endif %}
        </div>
        <div class="panel-body pb-4">
            <div class="media-row row align-items-center">
                <div class="col-2 file-control">
                    {%- set thumbnail = f.get_thumbnail(request) %}
                    <div class="thumbnail">
                    {% if thumbnail %}
                        <a class="thumbnail-image" href="{{ f.file_url }}" target="_blank">
                            <img src="{{ thumbnail.url }}" />
                        </a>
                    {% elif f.instance.pk %}
                        <a class="thumbnail-image thumbnail-file" href="{{ f.file_url }}" target="_blank">
                            <i class="fa fa-file-o"></i>
                        </a>
                    {% endif %}
                    </div>
                    {{ f.file }}
                </div>
                <div class="col extra-fields">
                {% if f.instance.pk %}
                    <h4>{{ f.instance.effective_title }}</h4>
                {% endif %}
                    {% if media_form.can_delete and f.instance.pk %}
                        <a href="#" class="btn btn-inverse btn-sm product-media-delete mr-2"><i class="fa fa-trash"></i></a>
                        <div class="d-none">{{ f.DELETE }}</div>
                    {% endif %}
                    {%- set id = media_form.prefix + "-" + idx|safe %}
                    <a href="#collapse-{{ id }}" class="btn btn-default btn-sm" role="button" data-toggle="collapse" aria-expanded="false">
                        <i class="fa fa-cog"></i>
                    </a>
                </div>
                <div class="col-3 actions d-flex align-items-center justify-content-center">
                    {{ bs3.field(f.ordering) }}
                </div>
            </div>
        </div>
        {%- set id = media_form.prefix + "-" + idx|safe %}
        <div class="panel-footer row" id="media-accordion-{{ id }}" role="tablist" aria-multiselectable="true">
            <div role="tab" id="media-{{ id }}" class="panel-footer-inner col-12">
                <div id="collapse-{{ id }}" class="advanced-container collapse" role="tabpanel" aria-labelledby="media-{{ id }}">
                    <div class="advanced-body">
                        {% if not is_image_form %}
                            {{ bs3.field(f.external_url) }}
                        {% endif %}
                        {{ bs3.field(f.public) }}
                        {% if not is_image_form %}
                            {{ bs3.field(f.purchased) }}
                        {% endif %}
                        {{ bs3.field(f.shops) }}
                        {{ bs3.field(f.kind) }}
                        {% set tab_id = id + "-additional-language" %}
                        {% call(form, language, map) language_dependent_content_tabs(f, tab_id_prefix=tab_id) %}
                            {{ bs3.field(f[map.title]) }}
                            {{ bs3.field(f[map.description]) }}
                        {% endcall %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{%- set is_image_form = media_form.prefix == "images" %}
{%- set id = "product-images-section" if is_image_form else "product-media-section" %}
{%- set name = _("Product Images") if is_image_form else _("Product Files") %}
{%- set icon = "fa-camera" if is_image_form else "fa-files-o" %}
{% call content_block(name, icon, id=id) %}
    {% if not is_image_form %}
        <p class="section-description">{% trans %}You can attach files such as manual to the merchandise(s) here.{% endtrans %}</p>
    {% else %}
        <p class="section-description">{% trans %}Showcase your merchandise here.{% endtrans %}</p>
    {% endif %}
    <div id="{{ id }}-dropzone" class="dropzone dropzone-no-preview"
        {% if is_image_form %}data-kind="images"{% endif %}
        data-product_id="{{ product.pk }}"
        data-upload_path="/products/{{ media_form.prefix }}">
        <div class="dz-message" data-dz-message>
            <span>{% trans %}Drop files here or click to <a href="#">browse</a>.{% endtrans %}</span>
        </div>
    </div>
    {{ media_form.management_form }}
    {% for f in media_form %}
        {{ render_media_form(f, media_form, loop.index, is_image_form) }}
    {% endfor %}
    <div class="d-none" id="{{ id }}-placeholder-panel">
        {{ render_media_form(media_form.empty_form, media_form, "__prefix_name__", is_image_form) }}
    </div>
{% endcall %}
